<template>
  <div class="box">
    <!-- 插值表达式 {{}} 响应式数据 -->
    <h1>插值表达式 {{msg1}}</h1>
    
    <!-- v-text 文本替换 -->
    <h1 v-text="msg1"></h1>
    <h1 v-text="msg2"></h1>

    <!-- v-html 文本替换，而且可以进行HTML语法解析 -->
    <h1 v-html="msg2"></h1>

    <br><br>

    <!-- v-bind:属性绑定 单向绑定 -->
    <a v-bind:href="href">百度一下1</a>
    <!-- v-on:click 点击事件绑定 -->
    <button v-on:click="clickMe">点击切换链接地址1</button>

    <br></br>
    <!-- 简化版：v-bind:href 直接简化为:href ， v-on:click 直接简化为 @click -->
    <a :href="href">百度一下2</a>
    <button @click="clickMe">点击切换链接地址2</button>

    <br></br><br></br>
    <input type="text" :value="username" @blur="changeName">

    <br></br><br></br>
    <form>
        <!-- v-model 双向绑定 -->
        <input type="text" name="name" v-model="user.name">
        <input type="text" name="pwd"  v-model="user.pwd">
        <br></br>
        <select type="text" name="city" v-model="user.city">
          <option value="合肥">合肥</option>
          <option value="南京">南京</option>
          <option value="上海">上海</option>
        </select>
        <br></br>
        <button type="button" @click="getFavoriteCity">获取心仪城市</button>
      </form>
      <h3>{{user.name}} -- {{user.pwd}} -- {{user.city}}</h3>
  </div>
</template>

<script setup>
  import {ref , reactive } from 'vue'

  let msg1 = ref('hello world')
  let msg2 = ref('<span style="color:blue">hello world<asdan>')

  let href = ref('https://www.baidu.com')
  const clickMe = ()=>{
    href.value = 'https://www.doubao.com/chat/?channel=ReCgp'
  }

  let username = ref('张三')
  const changeName = (e)=>{
    username.value = e.target.value
    alert(username.value)
  }

  let user = reactive({
    name:'zs',
    pwd:'123',
    city:'南京'
  })
</script>

<style scoped>

</style>